<template>
  <el-dialog title="添加影院" :modal-append-to-body="false" :visible="isDialog" @close="cls">
    <el-form :model="ruleForm" :rules="rules" label-width="80px" ref="ruleForm">
      <el-form-item label="影院名" prop="cinemaName">
        <el-input v-model="ruleForm.cinemaName"></el-input>
      </el-form-item>
      <el-form-item label="联系地址" prop="cinemaPhone">
        <el-input v-model="ruleForm.cinemaPhone"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="ruleForm.address" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <el-row type="flex">
      <el-col :span="20">
      </el-col>
      <el-col>
        <el-button @click="cls">取消</el-button>
        <el-button type="primary" @click="add">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    isDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    const phoneRule = (rule, value, callback) => {
      const reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[189]))\d{8}$/
      reg.test(value) ? callback() : callback(new Error('手机格式错误'))
    }
    return {
      rules: {
        cinemaName: [
          { required: true, message: '请输入影院名称', trigger: 'blur' }
        ],
        cinemaPhone: [
          { required: true, message: '请输入联系手机', trigger: 'blur' },
          { validator: phoneRule, trigger: 'blur' }
        ],
        address: [
          { required: true, message: '请输入地址', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapState('cinema', ['ruleForm', 'isAdd'])
  },
  methods: {
    cls () {
      this.$parent.isDialog = false
    },
    add () {
      if (this.isAdd) {
        this.$parent.add(this.ruleForm)
      } else {
        this.$emit('update', this.ruleForm)
      }
      this.$parent.isDialog = false
    }
  }
}
</script>

<style>
.el-form {
  margin: 0 auto;
  width: 450px;
}
</style>
